.domain-suggestion {
	box-sizing: border-box;
	display: flex;
	align-items: center;

	@include clear-fix;

	@include breakpoint( ">660px" ) {
		padding: 15px 20px;

		.domain-product-price {
			margin-left: 5%;
		}
	}

	&.is-clickable {
		cursor: pointer;

		&:hover {
			box-shadow: 0 0 0 1px $gray;
			z-index: z-index('root', '.domain-suggestion.is-clickable:hover');
		}
	}

	&.is-added {
		background-color: lighten( $gray, 35% );

		.domain-suggestion__content {
			h3, .domain-product-price {
				color: $gray;
			}
		}
	}
}

.domain-suggestion__content {
	width: 100%;
	min-height: 32px;

	@include breakpoint( ">660px" ) {
		display: flex;
		margin: 8px 0 0 0;
	}

	.notice.is-compact {
		margin: 0 0 0 8px;
	}

	.notice__icon {
		display: none;
	}

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: lighten( $gray, 30% );
		color: transparent;
		min-height: 44px;
	}

	@include breakpoint( ">660px" ) {
		.is-placeholder & {
			margin-right: 50%;
			min-height: 22px;
			margin-top: 9px;
			margin-bottom: 9px;
		}

		.is-placeholder:nth-of-type(2n+1) & {
			margin-right: 52%;
		}

		.is-placeholder:nth-of-type(1) & {
			margin-right: 40%;
		}
	}

	> h3 {
		word-break: break-all;

		@include breakpoint( ">660px" ) {
			width: 75%;
		}

		.is-placeholder & {
			color: transparent;
		}
	}
}

.domain-suggestion__action {
	flex: 1 0 auto;
	min-width: 66px;
	text-align: center;
	color: $blue-medium;

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: lighten( $gray, 30% );
		border: none;
		border-radius: 0;
		color: transparent;
		margin-left: 40px;
		min-height: 26px;
	}
}

.domain-suggestion__chevron {

	margin-left: 10px;
	flex: 1 0 auto;
	color: $gray;

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		color: lighten( $gray, 30% );
	}
}
